<template>
	<view>
		<u-navbar title="账单" @rightClick="rightClick" :placeholder="true" :autoBack="true"></u-navbar>
		<view class="page">
			<u-subsection :list="subList" :current="current" @change="subChange" mode="subsection"></u-subsection>
			<view v-if="current == 0">
				<view class="form">
					<view class="form-left">
						<view class="">收支类型：</view>
						<uni-data-select :localdata="range1" v-model="queryParams.operationType"
							@change="handleSelectChange"></uni-data-select>
					</view>
					<view class="form-right">
						<view class="">余额类型：</view>
						<uni-data-select :localdata="range2" v-model="queryParams.balanceType"
							@change="handleSelectChange"></uni-data-select>
					</view>
				</view>
				<view>
					<scroll-view scroll-y style="height: 83vh;" @scrolltolower="handleScrolltolower" v-if="list.length != 0">
						<view class="list" v-for="(item,index) in list" :key="index" @click="toDetails(item)">
							<view class="list-top display-f">
								<view class="label">{{operationType[item.operationType]}}</view>
								<view>{{item.changeAmount}}</view>
							</view>
							<view class="list-middle display-f">
								<view>{{item.auditCode || "-"}}</view>
							</view>
							<view class="list-bottom display-f">
								<view>{{item.applyAt}}</view>
								<view>{{desensitizeName(item.applyOperator)}}</view>
							</view>
						</view>
					</scroll-view>
					<view v-else>
						<u-empty></u-empty>
					</view>
				</view>
			</view>
			<view v-if="current == 1">
				<view class="form">
					<view class="form-left">
						<view class="">状态：</view>
						<uni-data-select :localdata="range3" v-model="status" @change="handleSelectChange"></uni-data-select>
					</view>
				</view>
				<view>
					<scroll-view scroll-y style="height: 83vh;" @scrolltolower="handleScrolltolower" v-if="list.length != 0">
						<view class="list" v-for="(item,index) in list" :key="index" @click="toDetails(item)">
							<view class="list-top display-f">
								<view class="label">{{payType[item.payType] || '-'}}</view>
								<view class="num">
									<view v-if="item.auditStatus == 1 || item.auditStatus == 2" style="color: blue;">审核中</view>
									<view v-if="item.auditStatus == 3" style="color: green;">通过</view>
									<view v-if="item.auditStatus == 4" style="color: red;">拒绝</view>
								</view>
							</view>
							<view class="list-middle display-f">
								<view>
									<view v-if="item.auditStatus == 4">
										{{item.reviewOpinion || item.trialOpinion}}
									</view>
									<view v-else>-</view>
								</view>
								<view>{{item.payPrice}}</view>
							</view>
							<view class="list-bottom display-f">
								<view>{{item.createTime}}</view>
								<view>{{desensitizeName(item.operatorName)}}</view>
							</view>
						</view>
					</scroll-view>
					<view v-else>
						<u-empty></u-empty>
					</view>
				</view>
			</view>
			<view v-if="current == 2">
				<view class="form">
					<view class="form-left">
						<view class="">状态：</view>
						<uni-data-select :localdata="range4" v-model="status" @change="handleSelectChange"></uni-data-select>
					</view>
				</view>
				<view>
					<scroll-view scroll-y style="height: 83vh;" @scrolltolower="handleScrolltolower" v-if="list.length != 0">
						<view class="list" v-for="(item,index) in list" :key="index" @click="toDetails(item)">
							<view class="list-top display-f">
								<view class="label">{{type[item.type] || '-'}}</view>
								<view class="num">
									<view v-if="item.result == 1 || item.result == 2" style="color: blue;">审核中</view>
									<view v-if="item.result == 3" style="color: green;">
										通过
										<text v-if="item.type == '02'">
											(
											<text v-if="item.refundStatus == 1"> 待退款 </text>
											<text v-if="item.refundStatus == 2"> 退款中 </text>
											<text v-if="item.refundStatus == 3"> 退款成功 </text>
											<text v-if="item.refundStatus == 4"> 退款失败 </text>
											<text v-if="item.refundStatus == 5"> 已回冲 </text>
											)
										</text>
									</view>
									<view v-if="item.result == 4" style="color: red;">拒绝</view>
								</view>
							</view>
							<view class="list-middle display-f">
								<view>
									<view>
										<view v-if="item.result == 4">
											{{item.reexamineRemark || item.preExaminationRemark}}
										</view>
										<view v-else>-</view>
									</view>
								</view>
								<view>{{item.price}}</view>
							</view>
							<view class="list-bottom display-f">
								<view>{{item.createTime}}</view>
								<view>{{desensitizeName(item.operatorName)}}</view>
							</view>
						</view>
					</scroll-view>
					<view v-else>
						<u-empty></u-empty>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				subList: ['收支记录', '公对公充值记录', '提现记录'],
				current: 0,
				list: [],
				total: 0,
				payType: this.$store.state.payType,
				type: this.$store.state.type,
				operationType: this.$store.state.operationType,
				urlParams: this.$store.state.urlParams,
				pageParams: {
					pageSize: 10,
					pageNum: 1
				},
				status: 0,
				queryParams: {
					operationType: "",
					balanceType: "",
				},
				range1: [{
					value: "10",
					text: "微信充值",
				}, {
					value: "09",
					text: "公对公充值",
				}, {
					value: "24",
					text: "解冻"
				}, {
					value: "06",
					text: "保证金回冲"
				}, {
					value: "05",
					text: "提现退还"
				}, {
					value: "20",
					text: "置换资料-支付"
				}, {
					value: "22",
					text: "出险查询-支付"
				}, {
					value: "21",
					text: "维保查询-支付"
				}, {
					value: "23",
					text: "冻结"
				}, {
					value: "08",
					text: "微信提现"
				}, {
					value: '03',
					text: "扣除"
				}, {
					value: "07",
					text: "公对公提现"
				}],
				range2: [{
						value: 1,
						text: "微信充值余额"
					},
					{
						value: 2,
						text: "公对公余额"
					}, {
						value: 3,
						text: "捷途公对公余额"
					}
				],
				range3: [{
						value: 1,
						text: "审核中"
					},
					{
						value: 3,
						text: "通过"
					}, {
						value: 4,
						text: "拒绝"
					}
				],
				range4: [{
						value: 1,
						text: "审核中"
					},
					{
						value: 3,
						text: "通过"
					}, {
						value: 4,
						text: "拒绝"
					}
				],
			}
		},
		computd: {

		},
		onLoad() {
			this.getList(this.current);
		},
		//触底加载
		onReachBottom() {},
		methods: {
			handleSelectChange(e) {
				this.pageParams.pageNum = 1;
				console.log(e);
				if (this.current == 1) {
					if (e == 1) {
						this.queryParams.auditStatusList = [1, 2]
					} else if (!e) {
						this.queryParams.auditStatusList = []
					} else {
						this.queryParams.auditStatusList = [e]
					}
				}
				if (this.current == 2) {
					if (e == 1) {
						this.queryParams.resultList = [1, 2]
					} else if (!e) {
						this.queryParams.resultList = []
					} else {
						this.queryParams.resultList = [e]
					}
				}
				this.getList(true);
			},
			handleScrolltolower() {
				console.log("触底");
				if (this.list.length < this.total) {
					this.pageParams.pageNum += 1
					this.getList()
				}
			},
			getList(isEmpty = false) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				let params = {
				}
				if (this.current == 0) {
					params = {
						...this.pageParams,
						...this.queryParams,
						...uni.getStorageSync("urlParams"),
					}
					this.api.billList(params).then(res => {
						console.log(res);
						if (isEmpty) {
							this.list = [];
						}
						this.total = res.data.total
						if (this.list.length < this.total) {
							this.list = this.list.concat(res.data.rows);
						}
					}).finally(() => {
						uni.hideLoading()
					})
				} else if (this.current == 1) {
					this.queryParams.payType = "03";
					params = {
						...this.pageParams,
						...this.queryParams,						
						...uni.getStorageSync("urlParams"),
					}
					this.api.rechargeList(params).then(res => {
						console.log(res);
						if (isEmpty) {
							this.list = [];
						}
						this.total = res.data.total
						if (this.list.length < this.total) {
							this.list = this.list.concat(res.data.rows);
						} else {

						}
					}).finally(() => {
						uni.hideLoading()
					})
				} else {
					params = {
						...this.pageParams,
						...this.queryParams,
						...uni.getStorageSync("urlParams"),
					}
					this.api.withdrawalList(params).then(res => {
						console.log(res);
						if (isEmpty) {
							this.list = [];
						}
						this.total = res.data.total
						if (this.list.length < this.total) {
							this.list = this.list.concat(res.data.rows);
						} else {

						}
					}).finally(() => {
						uni.hideLoading()
					})
				}
			},
			toDetails(item) {
				uni.navigateTo({
					url: `/pages/bill/details?type=${this.current}&id=${item.id}`
				})
			},
			subChange(e) {
				this.current = e;
				this.pageParams.pageNum = 1
				this.queryParams = {}
				this.list = [];
				this.status = null;
				this.getList(true)
			},
			to() {
				uni.navigateTo({
					url: '/pages/applyInvoice/index'
				})
			},
			//名字脱敏
			desensitizeName(name) {
				if (!name) return '-';
				const nameLength = name.length;
				if (nameLength === 1) return name;
				if (nameLength === 2) return name[0] + '*';
				return name[0] + '*'.repeat(nameLength - 2) + name[nameLength - 1];
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		margin: 20rpx;
	}

	// ::v-deep .u-status-bar {
	// 	height: 80rpx !important;
	// }

	.display-f {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 30rpx 5rpx;

		.list-top {
			.label {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #404040;
				line-height: 40rpx;
				margin: 10rpx;
			}

			.num {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #2AAD26;
				line-height: 40rpx;
				margin: 10rpx;
			}
		}

		.list-middle {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			line-height: 33rpx;
			margin: 10rpx;
		}

		.list-bottom {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			margin: 10rpx;
		}
	}

	.form {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 20rpx 0rpx;
		font-size: 24rpx;

		&-left {
			display: flex;
			align-items: center;
			width: 50%;
		}

		&-right {
			display: flex;
			align-items: center;
			width: 50%;
			margin-left: 10rpx;
		}
	}
</style>